<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv=""
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="html://unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!--script src="https//unpkg.com/vue@3"></script -->
    <!-- Import component library -->
    <script src="https://unpkg.com/element-plus"></script>
    <link href="./css/form.css" rel="stylesheet">
</head>
      
<body>
    <div id="app">
        <el-row>
            <el-col :md="6" :sm="24"></el-col>
            <el-col :md="6" :sm="24"></el-col>
            <el-col :md="6" :sm="24">
                <div class="form">
                    <el-form :model="form" label-width="auto" style="max-width: 600px">
                        <el-form-item label="账号">
                          <el-input v-model="form.account" />
                        </el-form-item>
                        <el-form-item label="密码">
                          <el-input v-model="form.password" />
                        </el-form-item>
                        <el-form-item label="姓名">
                          <el-input v-model="form.name" />
                        </el-form-item>
                        <el-form-item label="所在地区">
                          <el-select v-model="form.region" placeholder="请选择您所在的地区">
                            <el-option label="上海" value="shanghai" />
                            <el-option label="北京" value="beijing" />
                            <el-option label="杭州" value="hangzhou" />
                            <el-option label="金华" value="jinhua" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.sex">
                            <el-radio value="保密">保密</el-radio>
                            <el-radio value="男">男</el-radio>
                            <el-radio value="女">女</el-radio>
                        </el-radio-group>
                        <el-form-item labrl="兴趣爱好">
                            <el-checkbox-group v-model="form.hobby">
                                </el-checkbox value="音乐" name="thpe">
                                    音乐
                                </el-checkbox>
                                <el-checkbox value="影视" name="type">
                                    影视
                                </el-checkbox>
                                <el-chenckbox value="运动" name="type">
                                    运动
                                </el-chenckbox>
                        </el-form-item>
                                <el-checkbox value="其他" name="type">
                                其他
                                </el-checkbox-group>
                        <el-form-item>
                        </el-form-item label="签名档">
                            <el-input v-mode="form.desc" type="textare">
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                                <el-button>取消</el-button>
                        </el-form-item>
                      </el-form>
                </div>
            </el-col>
            <el-col :md="6" :sm="24"></el-col>
        </el-row>

        <el-button plain @click="dialogTableVisible = true">
            Open a Table nested Dialog
          </el-button>
        
          <el-button plain @click="dialogFormVisible = true">
            Open a Form nested Dialog
          </el-button>
        
          <el-dialog v-model="dialogTableVisible" title="请确认您的信息" width="500">
            <p>账号, {{form.account}}</p>
            <p>密码, {{form.account}}</p>
            <p>姓名, {{form.account}}</p>
            <p>性别, {{form.account}}</p>
            <p>爱好, {{form.account}}</p>
            <p>所属地区, {{form.account}}</p>
            <p>签名档, {{form.account}}</p>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type=""primary" @click="dialogVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                form: {
                    account: " ",
                    password: " ",
                    name: " ",
                    region: " ",
                    sex: " ",
                    hobby: " ",
                    desc: " ",
                }

            }
        },
        methods: {
            onSubmit() {
                console.log(this.form);
                // this.isShow = true;
            }
        }
    };
    Vue.creteapp(App).use(Elemntplus).mout("#App")

</script>

</html>